<!DOCTYPE html>

<html>

<head>

    <title>测试页面</title>

    <meta name="content-type" content="text/html; charset=gb2312">

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.3.1/jquery.min.js"></script>

    <script type="text/javascript">

        //选择全部

        function checkAllItem(obj) {

            var box = document.getElementsByName("box");

            for (var index = 0; index < box.length; index++) {

                if (obj.checked) {

                    box[index].checked = true;

                } else {

                    box[index].checked = false;

                }

            }

        }

        //全局变量

        var shiftKeyDown = false;

        function keyDownHandler(event) {

            shiftKeyDown = true;

        }

        function keyUpHandler(event) {

            shiftKeyDown = false;

        }

        function selectRow(obj) {

            if (shiftKeyDown) {

                var checks = $(":checkbox[name='box']");

                var currentIndex = checks.index($(obj)[0]);

                var lastIndex = -1;

                var box = document.getElementsByName("box");

                for (var index = 0; index < box.length; index++) {

                    if (box[index].checked) {

                        if (index != currentIndex) {

                            lastIndex = index;

                            if (index < currentIndex)

                                break;

                        }

                    }

                }

                if (lastIndex == -1) {

                    return;

                }

                if (lastIndex < currentIndex) {

                    for (var i = lastIndex; i <= currentIndex; i++) {

                        if (obj.checked) {

                            box[i].checked = true;

                        } else {

                            box[i].checked = false;

                        }

                    }

                } else {

                    for (var i = currentIndex; i <= lastIndex; i++) {

                        if (obj.checked) {

                            box[i].checked = true;

                        } else {

                            box[i].checked = false;

                        }

                    }

                }

            }

        }

    </script>

</head>

<body onkeydown="keyDownHandler(event)" onkeyup="keyUpHandler(event);">

    <h3>javascript代码实现按住shift键完成复选框的区间选中</h3>

    <table style="width: 60%;" border="1">

        <tr>

            <td style="width: 10%">
                <input type="checkbox" name="allBox" onclick="checkAllItem(this);" />全选 </td>

            <td>列1</td>
            <td>列2</td>
        </tr>
        <tr>

            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>

            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="box" onclick="selectRow(this);" />
            </td>

            <td>Cell</td>
            <td>Cell</td>
        </tr>

    </table>

</body>

</html>